<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <% if(typeof(title) !== 'undefined'){ %>
    <title><%= title %></title>
    <% } %>
    <link rel="stylesheet" href="https://cdn.staticfile.org/semantic-ui/2.2.2/semantic.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/semantic-ui/2.2.2/semantic.min.js"></script>
    <style type="text/css">
        body {
            background-color: #DADADA;
        }

        body > .grid {
            height: 100%;
        }

        .image {
            margin-top: -100px;
        }

        .column {
            max-width: 450px;
        }
    </style>
    <script>
        $(document).ready(function () {
                    $('.ui.form').form({
                        fields: {
                            email: {
                                identifier: 'email',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: 'Please enter your e-mail'
                                    },
                                    {
                                        type: 'email',
                                        prompt: 'Please enter a valid e-mail'
                                    }
                                ]
                            },
                            password: {
                                identifier: 'password',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: 'Please enter your password'
                                    },
                                    {
                                        type: 'length[6]',
                                        prompt: 'Your password must be at least 6 characters'
                                    }
                                ]
                            }
                        },
                        //inline: true,
                        on: 'blur',
                        //transition: 'fade down',
                        onSuccess: submitLogin
                    });
                    function submitLogin() {
                        console.log('登录提交');
                        $.ajax({
                            url: "/login",
                            data: $('.ui.form').serialize(),
                            type: "POST",
                            cache: false,
                            dataType: 'json',
                            success: function (msg) {
                                console.log(msg);
                                if(msg.result){
                                    $('#updateMessage').hide();
                                    window.location.href='/';
                                }
                                else {
                                    $('#updateMessage').show();
                                    $('#updateMessage').text(msg.message);
                                }
                                //console.log($('.ui.error.message').text);
                            },
                            error: function () {
                                alert('异常');
                            }
                        })
                    };
                    $('.ui.form').submit(function () {
                        return false;
                    });
                }
        );
    </script>
</head>
<body>
<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h2 class="ui teal image header">
            <img src="images/logo.png" class="image">
            <div class="content">
                登录
            </div>
        </h2>
        <form class="ui large form">
            <div class="ui stacked segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="mail outline icon"></i>
                        <input type="text" name="email" placeholder="E-mail address">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" placeholder="Password">
                    </div>
                </div>
                <div class="ui fluid large teal submit button">Login</div>
            </div>
            <div class="ui error message"></div>
        </form>

        <div class="ui error message" id="updateMessage" style="display: none">

        </div>

        <div class="ui message">
            没注册? <a href='/signup'>点我注册</a>
        </div>
    </div>
</div>

</body>
</html>
